import Vue from 'vue'
import App from './App.vue'
import {Button,Field} from 'mint-ui'
// import VueLazyload from 'vue-lazyload'
import router from './router'
import store from './store'
// Vue.config.productionTip = false
import '../static/css/reset.css'
import '../static/css/iconfont.css'
// Vue.use(VueLazyload, { // 内部自定义一个指令lazy
//   loading
// })
import touch from 'vue-directive-touch'
Vue.use(touch)
import 'mint-ui/lib/style.css'
Vue.component(Button.name, Button)  // <mt-button>
Vue.component(Field.name, Field)
new Vue({
  el:'#app',
  render: h => h(App),
   router, //使用上vue-router
   store, // 使用上vuex
})

let imageIsExist = function(url) {
    return new Promise((resolve) => {
        var img = new Image();
        img.onload = function () {
            if (this.complete == true){
                resolve(true);
                img = null;
            }
        }
        img.onerror = function () {
            resolve(false);
            img = null;
        }
        img.src = url;
    })
}
//全局注册自定义指令，用于判断当前图片是否能够加载成功，可以加载成功则赋值为img的src属性，否则使用默认图片
Vue.directive('real-img', async function (el, binding) {//指令名称为：real-img
    let imgURL = binding.value;//获取图片地址
    if (imgURL) {
        let exist = await imageIsExist(imgURL);
        if (exist) {
            el.setAttribute('src', imgURL);
        } 
    }
})
